<template>
	<div id="detail-navbar">
		<nav-bar>
				<div slot="left" class="backimg" @click="backclick">
					<img src="@/assets/img/common/back.svg" >
				</div>
				<div slot="center" class="detail-nav-bar">
					<div class="item" :class="{active: index == currentIndex}" v-for="(item,index) in title" :key="index" @click="itemClick(index)">
						{{item}}
					</div>
				</div>
		</nav-bar>
	</div>
</template>

<script>
	import NavBar from 'components/common/navbar/NavBar'
	export default {
		components:{
			NavBar
		},
		data(){
			return{
				title:['商品','参数','评论','推荐'],
				currentIndex:0
			}
		},
		methods:{
			itemClick(index){
				this.currentIndex = index
				this.$emit('itemClick', index)
			},
			backclick(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style>
	.detail-nav-bar{
		display: flex;
	}
	.item{
		flex: 1;
		font-size: 16px;
	}
	.backimg img{
		vertical-align: middle;
	}
	.active{
		color: var(--color-high-text);
	}
</style>
